<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="telephone=no" name="format-detection">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>宣和艺网-共享艺术服务平台</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/public.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/jquery.bxslider.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/style.css}"/>
    <script type="text/javascript" th:src="@{/js/mobile/jquery1.11.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/mobile/jquery.bxslider.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/mobile/index.js}"></script>
  <script type="text/javascript" th:src="@{/js/mobile/redirectPc.js}"></script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?d554d2fe469092ab25a4245851a644f0";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</head>

<body>
<!--手机搜索begin-->
<div id="nav-search">

</div>
<div class="drawer-section search_div">
    <div class="search_con">
        <form action="" style="width: 100%;height: 100%;">
            <input name="names" type="text" class="input1" value="搜索" onFocus="if(value=='搜索'){value=''}"
                   onBlur="if(value==''){value='搜索'}"/>
            <input type="submit" value="" class="bnt1"/>
        </form>
    </div>
</div>

<div class="drawer-section-name search_div" style="padding-bottom: 11%;">
    <div class="search_con">
        <form action="/m/index/artwork/online" style="width: 100%;height: 100%;">
            <input type="hidden" name="type" th:value="${type}"/>
            <input placeholder="艺术品名称" name="name" type="text" class="input1" value="" onFocus="if(value=='搜索'){value=''}"
                   onBlur="if(value==''){value='搜索'}"/>


            <div style="clear: both;display: flex; justify-content: space-between; align-items: center;padding-top: 7px;">
                <div style="display: inline;border: 1px solid #ccc;padding: 0px 6px;height: 27px;line-height: 27px;" onclick="quit_search_name()">返 回</div>
                <button type="submit" style="background: #b68036;color: #fff;padding: 3px 6px;">搜 索</button>

            </div>

        </form>
    </div>
</div>
<!--top-->
<div id="top">
    <div class="wrap clearfloat">
        <div th:replace="~{mobile/component/header :: index_menu}"></div>

        <div class="topPhone clearfloat">

        </div>
    </div>
    <div class="muen1" style="right: 56px;">
        <span class="muenX"></span> <span class="muenY">
        <img class="img1" th:src="@{/images/mobile/search_image.png}"/>
      </span> <span class="muenZ"></span>
    </div>
    <div class="muen"><span class="muenX"></span> <span class="muenY"></span> <span class="muenZ"></span></div>
</div>
<!--/top-->

<!--main-->
<div class="main">
    <div class="banner">
        <ul class="slider1">
            <li><a href=""><img class="img1" th:src="@{/images/mobile/banner_wap.png}"/><img class="img2"
                                                                                             th:src="@{/images/mobile/banner_wap.png}"/></a>
            </li>
            <li><a href=""><img class="img1" th:src="@{/images/mobile/banner_wap.png}"/><img class="img2"
                                                                                             th:src="@{/images/mobile/banner_wap.png}"/></a>
            </li>
            <li><a href=""><img class="img1" th:src="@{/images/mobile/banner_wap.png}"/><img class="img2"
                                                                                             th:src="@{/images/mobile/banner_wap.png}"/></a>
            </li>
        </ul>
    </div>


    <div class="about_bg3">
        <div class="aboutL">
            <!--<span class="BtnL"></span>-->
            <div class="aboutH">
                <h3>ONLINE LIST</h3>
                <h2>作品在线列表</h2>
            </div>


        </div>
        <div style="clear: both;height: 0.5rem;">

        </div>
        <script>
            $(document).ready(function () {
                // 给 class 为 packUp 的元素绑定点击事件
                $('#type-control').click(function () {
                    // 切换 id 为 art-type-select 的元素的显示状态
                    $('#art-type-select').toggle();
                    // 根据显示状态修改按钮文本
                    if ($('#art-type-select').is(':visible')) {
                        $(this).text(' 收起▲ ');
                    } else {
                        $(this).text(' 展开▼ ');
                    }
                });
            });


        </script>
        <div class="encyclopedia-type">
            <div class="type-box">
                <div class="type-title">
                    <span class="type-class">艺术类型：</span>
                    <span class="packUp" id="type-control"> 收起▲ </span>
                </div>
                <div class="type-attribute" id="art-type-select">
                    <div class="type-attribute-box">
                        <div th:class="${type == null||type == 'null'||type == ''}? 'type-item selectItem type-item-art-type' : 'type-item type-item-art-type '">
                            <a th:href="@{/m/index/artwork/online(name=${name},currentPage=${currentPage})}"> 全部</a>
                        </div>
                        <div th:class="${type == artType.id}? 'type-item selectItem type-item-art-type' : 'type-item type-item-art-type '"
                             class="type-item type-item-art-type" th:each="artType:${artTypes}">
                            <a th:href="@{/m/index/artwork/online(type=${artType.id},name=${name},currentPage=${currentPage})}">
                                [[${artType.name}]]
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="type-box">
                <div class="type-title">
                    <span class="type-class">艺术品名称：</span>
                    <span th:if="${name==null || name ==''}" class="packUp search_name"> 搜索
              </span>
                    <span th:if="${name!=null && name !=''}" class="packUp">
              <a th:href="@{/artwork/online(type=${type})}">
                <span style="margin-right: 10px;">[[${name}]]</span><span style="color: red;">×</span></a>
              </span>

                </div>
            </div>
        </div>
        <div class="product_ul anim anim-1 anim-show">

            <!--列表-->
            <aside class="fall-box grid">
                <div class="grid-item item" th:each="artwork,index:${artworks}">
                    <a th:href="@{/m/index/online/artwork/detail(id=${artwork.id})}" style="display: block;">
                        <img th:src="${artwork.url}" class="item-img" style="border-radius: 7px;" />
                        <section class="section-p" style="border-top: 1px solid #eee;padding-left: 0px;">
                            <div style="padding-left: 5px;padding-right: 5px; text-align: left; font-size: 12px;">
                                <span style="text-align: left; float: left;width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"> [[ ${artwork.name} ]]</span>
                                <span style="text-align: left; clear: both;"></span>
                            </div>
                            <div style="padding-left: 5px;text-align: left; font-size: 12px;">作者：[[
                                ${artwork.artistName} ]]
                            </div>
                            <div style="padding-left: 5px;text-align: left; font-size: 12px;">价格：[[ ${artwork.price ==
                                null || artwork.price == 0 ? '****' : artwork.price + "元"} ]]
                            </div>
                            <div style="padding-left: 5px;text-align: left; font-size: 12px;">规格：[[ ${artwork.spec}
                                ]]
                            </div>
                            <div style="padding-left: 5px;text-align: left; font-size: 12px;">编号：[[
                                ${artwork.artworkNum == null||artwork.artworkNum == 0 ? '****' : artwork.artworkNum } ]]
                            </div>
                            <div style="padding-left: 5px;text-align: left; font-size: 12px;">代理：<span
                                    style="color: #b68036;">[[ ${artwork.departNames} ]]</span>
                            </div>
                        </section>
                    </a>
                </div>
            </aside>
            <!--/列表-->



        </div>
        <div class="pages anim anim-3 yema">
            <div>
                <a class="next" th:href="@{/m/index/artwork/online(currentPage=${currentPage - 1},name=${name},type=${type})}" th:if="${currentPage != 1}">
                    &lt;&lt;
                </a>
                <div th:each="page:${pages}" style="display: inline;">
                    <span class="current" th:text="${page}" th:if="${currentPage == page}">1</span>
                    <a class="num" th:href="@{/m/index/artwork/online(currentPage=${page},name=${name},type=${type})}" th:if="${currentPage != page}" th:text="${page}"></a>
                </div>
                <a class="next" th:href="@{/m/index/artwork/online(currentPage=${currentPage + 1},name=${name},type=${type})}" th:if="${currentPage != totalPages}">
                    &gt;&gt;
                </a>
            </div>
        </div>
    </div>

</div>

<!--/main-->

<!--/main-->

<!--footer-->
<div th:replace="~{mobile/component/footer :: footer}"></div>
<!--/footer-->

<!--wap-->
<div th:replace="~{mobile/component/footer :: footer_menu}"></div>
<!--/wap-->

<div class="wapBg"></div>
</body>
<script type="text/javascript">
    $('.slider1').bxSlider({
        'auto': true,
        'controls': true,
        'touchEnabled': true,
        'pager': true,
        'speed': 1000,
        'pause': 4000,

    })

    $('.sliderHomeSpT').bxSlider({
        'auto': false,
        'controls': true,
        'touchEnabled': true,
        'pager': true,

    })

    var lineW = $(".lineW span").width();
    $('.sliderHomeSpB').bxSlider({
        'auto': false,
        infiniteLoop: true,
        'controls': true,
        'touchEnabled': true,
        'pager': true,
        'slideWidth': '204',
        'minSlides': 2,
        'maxSlides': 5,
        'moveSlides': 5,
        onSlideAfter: function ($slideElement, oldIndex, newIndex) {
            var num = $(".homeSpBW .bx-pager .bx-pager-item").length;
            var lineWW = $(".lineW").width();


            if (newIndex == 0) {
                $(".lineW span").css({
                    "width": lineW + 'px'
                })
            } else {
                $(".lineW span").css({
                    "width": (lineWW / num) * (newIndex + 1) + 'px'
                })
            }

        },


    })

    $('.sliderHomeDzzc').bxSlider({
        'auto': true,
        'controls': true,
        'touchEnabled': true,
        'pager': false,
        'slideWidth': '280',
        'minSlides': 2,
        'maxSlides': 4,
        'moveSlides': 1,
        'speed': 600,
        //	    'slideMargin': 20
    })





</script>
<script th:src="@{/js/mobile/pb/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{/js/mobile/pb/masonry.pkgd.min.js}"></script>
<script th:src="@{/js/mobile/pb/masonry.pkgd.min.js}"></script>
<script th:src="@{/js/mobile/pb/swiper.min.js}"></script>
<script th:src="@{/js/mobile/pb/find.js}"></script>

</html>
